<template>
  <div>
    <Header>
      <van-icon name="arrow-left" size="22" slot="left" />
      <van-icon name="wap-home-o" size="22" slot="right" />
      <span slot="center">注册</span>
    </Header>
    <section class="register_section">
      <!-- 1. 手机号码 -->
      <van-row>
        <input type="number" v-model="user" placeholder="请输入手机号码">
      </van-row>
      <!-- 2. 图形验证码 -->
      <van-row>
        <input type="number" v-model="figure" placeholder="请输入图形验证码" />
        <span id="v_container"></span>
      </van-row>
      <!-- 3. 短信验证码 -->
      <van-row>
        <input type="number" v-model="meAuthCode" placeholder="请输入短信验证码">
        <button class="mscode" @click="getMsCode" :class="{ mscode_disabled: isMsCodeShow }">短信验证码</button>
      </van-row>
      <!-- 4. 密码 -->
      <van-row>
        <input type="password" v-model="password" placeholder="请设置密码">
      </van-row>
      <van-row>
        <div class="register_btn" @click="register">注册</div>
      </van-row>
      <p class="notice">注册即视为同意<a>《服务协议》</a></p>

    </section>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { GVerify } from '@/utils/verifyCode'
import { Toast } from 'vant'
import { getMyAuthCode } from '@/network/api/meAuthCode'
import { registerRequest } from '@/network/api/user'
export default {
  name: 'register',
  components: {
    Header
  },
  data() {
    return {
      user: '', // 手机号
      figure: '', // 图形验证码
      meAuthCode: '', // 短信验证码
      correctMsCode: '', // 正确的短信验证码
      isMsCodeShow: false,
      password: '', // 密码
      verifyCode: null, // 校验对象
      reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    }
  },
  methods: {
    async getMsCode() {
      if (!this.user || !this.reg_tel.test(this.user)) {
        return Toast.fail('请输入正确的手机号码')
      }
      let time = 59
      const res = await getMyAuthCode(this.user)
      console.log(res);
      if (res.status !== '0') return Toast.fail(res.msg)
      this.correctMsCode = res.correctCode
      Toast.success(res.msg)
      const timer = setInterval(() => {
        const msCode = document.querySelector('.mscode')
        this.isMsCodeShow = true
        msCode.innerHTML = `${time}秒后再次发送`
        msCode.disabled = true
        time--
        if (time === -1) {
          this.isMsCodeShow = false
          msCode.innerHTML = '获取短信验证码'
          msCode.disabled = false
          clearInterval(timer)
        }
      }, 1000);

    },
    async register() {
      // 1. 进行手机号正则校验
      if (!this.reg_tel.test(this.user)) return Toast.fail('请输入正确的手机号码')
      if (!this.figure) return Toast.fail('请输入图形验证码')
      if (!this.verifyCode.validate(this.figure)) return Toast.fail('图形验证码输入不正确')
      if (!this.meAuthCode) return Toast.fail('请输入短信验证码')
      if (!this.password) return Toast.fail('密码不能为空')
      // 2. 进行短信验证码的验证
      if (this.correctMsCode !== this.meAuthCode) return Toast.fail('短信验证码不正确')
      // 3. 发送网络请求
      const that = this
      await registerRequest({
        user: that.user,
        password: that.password
      })
      this.$router.push('/login')
    }
  },
  async mounted() {
    this.verifyCode = new GVerify('v_container')
  },
}
</script>

<style scoped lang="less">
.register_section {
  margin-top: 40px;
  width: 100%;
  height: 350px;

  .van-row {
    display: flex;
    justify-content: center;

    input {
      width: 88%;
      height: 44px;
      border: 1px solid #ddd;
      margin-bottom: 15px;
      font-size: 13px;
      padding-left: 8px;
    }

    .input::-webkit-input-placeholder {
      font-size: 13px;
      color: #cccccc;
      padding-left: 8px;
    }

    .input:-moz-placeholder {
      font-size: 13px;
      color: #cccccc;
      padding-left: 8px;
    }

    .input:-ms-input-placeholder {
      font-size: 13px;
      color: #cccccc;
      padding-left: 8px;
    }

    .register_btn {
      width: 80%;
      padding: 12px 16px;
      background-color: #b0352f;
      color: #fff;
      text-align: center;
      font-size: 14px;
    }
  }

  #v_container {
    height: 48px;
    position: absolute;
    right: 17px;
    border-left: 2px solid #eee;
  }

  .mscode,
  .mscode_disabled {
    box-sizing: border-box;
    width: 120px;
    height: 48px;
    position: absolute;
    right: 17px;
    padding: 5px;
    background-color: #b0352f;
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 38px;
    border-radius: 5px;
    border: none;
  }

  .mscode_disabled {
    background-color: #eee;
    color: #848689;
  }

  .notice {
    font-size: 12px;
    margin-left: 20px;

    a {
      color: #b0352f;
      text-decoration: underline;
    }
  }
}
</style>

